<template>
	<view class="title">
		登录账号
	</view>
	<view class="username">
		<input v-model="username" type="text" placeholder="请输入用户名" />
	</view>
	<view class="password">
		<input v-model="password" type="safe-password" :password="!showPassword" placeholder="请输入密码" />
		<uni-icons class="eye" :type="showPassword ? 'eye' : 'eye-slash'" size="24" @click="showPassword = !showPassword"></uni-icons>
	</view>
	<view class="minbox">
		<view class="left">忘记密码？</view>
		<view class="right">用验证码登录</view>
	</view>
	<button @click="login" class="login">立即登录</button>
	<view class="fastLogin">
		<view class="fast_title">快捷登录方式</view>
		<view class="box">
			<image src="../../static/qq.png" mode="widthFix"></image>
			<image src="../../static/wx.png" mode="widthFix"></image>
			<image src="../../static/wb.png" mode="widthFix"></image>
		</view>
	</view>

	<view :animation="animationData" class="agree">
		<checkbox-group @change="click">
			<label>
				<checkbox :value="checked" />
				<view>本人已同意《用户服务协议》和《隐私政策》</view>
			</label>
		</checkbox-group>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const checked = ref(false)
	const animationData = ref({})
	const showPassword = ref(false)
	const username = ref("")
	const password = ref("")
	let x = false
	const click = (e) => {
		x = e.detail.value.length === 1
	}
	const login = () => {
		if (x === false) {
			const animation = uni.createAnimation({
				duration: 100,
				timingFunction: "ease"
			})
			animation.translate(10).step()
			animation.translate(-10).step()
			animation.translate(10).step()
			animation.translate(-10).step()
			animation.translate(0).step()
			animationData.value = animation.export()
		} else {
			uni.showLoading({
				title: '登录中……',
				mask: true
			})
			uniCloud.callFunction({
				name: 'login',
				data: { username: username.value, password: password.value }
			}).then((res) => {
				console.log(res);
				uni.hideLoading()
				if (res.result.data.length === 0) {
					uni.showToast({
						title: '用户名或密码错误！',
						icon: 'error'
					})
				} else {
					uni.showToast({
						title: '登录成功！',
						icon: 'success'
					})
					uni.setStorageSync('userId', res.result.data[0]._id)
					console.log(res.result.data[0]._id);
					uni.navigateTo({
						url: '/pages/index/index',
					})
				}
			}).catch((err) => {
				console.log(err.message);
			})
		}
	}
</script>

<style lang="scss" scoped>
	$space-top: 150rpx;

	.title {
		font-size: 56rpx;
		font-weight: 550;
		margin-left: 60rpx;
		margin-bottom: 70rpx;
		padding-top: $space-top;
	}

	.username {
		input {
			background-image: url(../../static/user.png);
			background-repeat: no-repeat;
			background-position: 10rpx;
		}
	}

	.password {
		display: flex;
		align-items: center;
		
		input {
			background-image: url(../../static/password.png);
			background-repeat: no-repeat;
			background-position: 10rpx;
		}
		.eye {
			position: absolute;
			right: 90rpx;
		}
	}

	input {
		background-color: #FFE7D1;
		width: 500rpx;
		padding: 30rpx 30rpx;
		padding-left: 100rpx;
		margin: 30rpx auto;
		border-radius: 40rpx;
	}

	.minbox {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 70rpx;
		font-size: 30rpx;

		.left {
			color: red;
		}
	}

	.login {
		background-color: #FFAD63;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		margin: 20rpx 60rpx;
		border-radius: 30rpx;
		height: 107rpx;
		font-weight: 600;
		box-shadow: 0rpx 0rpx 70rpx #FFAD63;
	}

	.fastLogin {
		margin-top: 120rpx;

		.fast_title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
		}

		.box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 40rpx 100rpx;

			image {
				width: 92rpx;
			}
		}
	}

	.agree {
		position: fixed;
		bottom: 100rpx;
		left: 120rpx;
		
		label {
			display: flex;
			align-items: center;
			justify-content: center;
			white-space: nowrap;
			checkbox {
				transform: scale(0.7)
			}
			view {
				width: 440rpx;
				font-size: 30rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}
	}
</style>